<template>
	<app-layout>
		<view v-if="is_show" class='express-box'>
			<view class='box-grow-1 top-box dir-left-wrap'>
				<view class='box-grow-0 cross-center main-center'>
					<image class='goods-pic' mode='aspectFill' :src='cover_pic'></image>
				</view>
				<view class='dir-top-wrap box-grow-1 main-around'>
					<view class='dir-left-nowrap'>
						<text class='box-grow-0 label'>快递公司:</text>
						<text class='box-grow-0'>{{express || '顺丰速运'}}</text>
					</view>
					<view class='dir-left-nowrap cross-center'>
						<text class='box-grow-0 label'>快递单号:</text>
						<text class='box-grow-1'>{{mailNo}}</text>
						<view @click='copyText' class='box-grow-0 detail-btn'>复制</view>
					</view>
				</view>
			</view>
			<view class='logistics-box dir-top-wrap'>
				<block v-if='expressDetail'>
					<view class='item-box'>
						<view v-for='(item,index) in expressDetail' :key='item.id'
							:class="{'sign-text': index == 0 ? true : false}" class='dir-top item'>
							<image v-if='index == 0' class='sign-big' src='/static/image/icon/order/point-green.png'>
							</image>
							<image v-else class='sign' src='/static/image/icon/order/point-gray.png'></image>
							<view>{{item.remark}}</view>
							<view>{{item.acceptTime}}</view>
						</view>
					</view>
				</block>
				<view v-else class='main-center empty-box'>
					<view>暂无物流信息</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import order from "../order.js";
	export default {
		data() {
			return {
				expressDetail: null,
				order: null,
				express: '',
				express_no: '',
				mailNo: '',
				merchant_remark: '',
				cover_pic: '',
				customer_name: '',
				is_show: false,
			}
		},
		methods: {
			getExpressDetail() {
				this.$showLoading();
				this.$request({
					url: this.$apiSol.order.order_express_detail,
					data: {
						trackingNumber: this.express_no,
						checkPhoneNo: this.merchant_remark,
					}
				}).then(response => {
					this.$hideLoading();
					this.is_show = true;
					if (response.code === 0) {
						this.mailNo = response.data.routeResps[0].mailNo;
						this.expressDetail = response.data.routeResps[0].routes.reverse();
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(() => {
					this.$hideLoading();
				});
			},
			copyText() {
				order.copyText(this.mailNo)
			},
		},
		onLoad(options) {
			this.express = options.express;
			this.express_no = options.express_no;
			this.merchant_remark = options.merchant_remark;
			this.customer_name = options.customer_name;
			this.cover_pic = options.cover_pic;
			this.getExpressDetail();
		}
	}
</script>

<style lang="scss" scoped>
	.express-box {
		position: absolute;
		height: 100%;
		width: 100%;
	}

	.express-box .top-box {
		padding: #{20rpx};
		background-color: #ffffff;
	}

	.express-box .label {
		margin-right: #{10rpx};
	}

	.express-box .goods-pic {
		width: #{130rpx};
		height: #{130rpx};
		margin-right: #{20rpx};
	}

	.logistics-box {
		padding: #{20rpx} #{25rpx};
		background-color: #fff;
		margin-top: #{25rpx};
		font-size: $uni-font-size-weak-two;
		color: $uni-general-color-two;
	}

	.logistics-box .item-box {
		border-left: #{1rpx} solid $uni-weak-color-one;
		padding-left: #{45rpx};
		position: relative;
	}

	.logistics-box .item {
		margin-bottom: #{25rpx};
		padding-bottom: #{25rpx};
		border-bottom: #{1rpx} solid $uni-weak-color-one;
	}

	.logistics-box .item .sign {
		width: #{16rpx};
		height: #{16rpx};
		position: absolute;
		left: #{-7rpx};
	}

	.logistics-box .item .sign-big {
		width: #{32rpx};
		height: #{32rpx};
		position: absolute;
		left: #{-16rpx};
	}

	.sign-text {
		color: #25ae5f;
	}

	.empty-box {
		font-size: $uni-font-size-general-one;
	}

	.detail-btn {
		border: 1#{rpx} solid #bbbbbb;
		border-radius: 30#{rpx};
		padding: 10#{rpx} 30#{rpx};
	}
</style>
